<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-input class="x_soso" v-model="search.keyword"  placeholder="请输入设备名称/代理商名称/店长名称/绑定门店名称搜索"></el-input>
				<el-select class="x_soso" filterable v-model="search.name" placeholder="按关联设备搜索">
					<el-option v-for="item in rankList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-button type="primary" @click="searchList">查询</el-button>

			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click='reloadVal'>刷新</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table @sort-change='sortChange' v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="设备型号" align="center" width="150" prop="equModel"></el-table-column>
				<el-table-column label="类型" align="center" width="150" prop="equType">
					<template slot-scope="scope">
						<span v-if="scope.row.equType == 1">抗衰仪</span>
					</template>
				</el-table-column>
				<el-table-column label="图片" align="center" width="150" prop="equImg">
					<template slot-scope="scope">
						<img :src="scope.row.equImg" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="设备名称" align="center" width="150" prop="equName"></el-table-column>
				<el-table-column label="所属代理商名称" align="center" width="200" prop="ageName"></el-table-column>
				<el-table-column label="代理商电话" align="center" width="200" prop="agePhone"></el-table-column>
				<el-table-column label="所属店长名称" align="center" width="150" prop="memName"></el-table-column>
				<el-table-column label="店长电话" align="center" width="150" prop="memPhone"></el-table-column>
				<el-table-column label="绑定门店" align="center" width="150" prop="shopName"></el-table-column>
				<el-table-column label="当前状态" :sortable="'custom'" align="center" width="150" prop="equStatus">
					<template slot-scope="scope">
						<span v-if="scope.row.equStatus == 1">设备新增</span>
						<span v-if="scope.row.equStatus == 2">设备绑定</span>
						<span v-if="scope.row.equStatus == 3">设备维修</span>
						<span v-if="scope.row.equStatus == 4">设备解绑</span>
					</template>
				</el-table-column>
				<el-table-column label="是否绑定" align="center" width="150" prop="isBind">
					<template slot-scope="scope">
						<span v-if="scope.row.isBind == 1">绑定</span>
						<span v-if="scope.row.isBind == 0">未绑定</span>
					</template>
				</el-table-column>
				<el-table-column label="出厂日期" :sortable="'custom'" align="center" width="150" prop="produceTime"></el-table-column>
				<el-table-column label="累计工次" :sortable="'custom'" align="center" width="150" prop="useNum"></el-table-column>
				<el-table-column label="累计时长" :sortable="'custom'" align="center" width="150" prop="useDate"></el-table-column>
				<el-table-column label="累计耗点" :sortable="'custom'" align="center" width="150" prop="useDot"></el-table-column>
				<el-table-column label="维修次数" align="center" width="150" prop="repairNum"></el-table-column>
				<el-table-column label="温度预警" align="center" width="150" prop="temperatureWarning"></el-table-column>
				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<div v-if="scope.row.schemeId == 10"></div>
						<el-switch v-else v-model="scope.row.isEnabled" active-color="#13ce66" inactive-color="#dedede" :active-value="1"
						 :inactive-value="0" @change="changeSwitch(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="350">
					<template slot-scope="scope">
						<!-- <el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">报修</el-button> -->
						<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">更换绑定</el-button>

					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination background @current-change="columnFind" :current-page="page.page" :page-size="page.pagesize" layout="prev, pager, next, jumper, total"
				 :total="page.count"></el-pagination>
			</div>
		</el-card>
		<el-dialog title :visible.sync="dialogColor" width="1000px" :close-on-click-modal="false">
			<el-card shadow="never">
				<div style="text-align: left;">
					<el-input class="x_soso" v-model="searchName" placeholder="请输入门店名称/店长电话"></el-input>
					<el-button type="primary" @click="searchshop">查询</el-button>
				</div>

				<div style="clear:both"></div>
				<el-table v-loading="loading" :data="tableDataList" highlight-current-row @current-change="handlecurrentChange"
				 style="width: 100%;margin-top: 20px">
					<el-table-column label="门店名称" align="center" width="120" prop="shopName"></el-table-column>
					<el-table-column label="详细地址" align="center" width="250" prop="addressDetail"></el-table-column>
					<el-table-column label="店主姓名" align="center" width="150" prop="memName"></el-table-column>
					<el-table-column label="店主电话" align="center" width="" prop="memPhone"></el-table-column>
				</el-table>
				<div style="margin-top: 20px;text-align: right">
					<el-pagination background @current-change="shopListData" :current-page="page2.page" :page-size="page2.pagesize"
					 layout="prev, pager, next, jumper, total" :total="page2.count"></el-pagination>
				</div>
			</el-card>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor = false">取 消</el-button>
				<el-button type="primary" @click="yesChange">确认更换</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
	import {
		deviceList,
		deviceSwitch,
		shopList,
		equShop
	} from '../../../server/index.js';

	export default {
		inject: ['reload'],
		data() {
			return {
				//查询
				search: {},
				searchName: '',
				rankList: [{
					id: 1,
					name: '抗衰仪'
				}],
				switchVal: true,
				onSwitch: "1",
				offSwitch: "0",
				tableData: [],
				tableDataList: [],
				equId: '', // 设备ID
				shopId: '', // 店铺Id
				selectData: [],
				selectRow: [],

				loading: true,
				cname: '添加组织机构',
				flmc: '',
				page: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				page2: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				dialogColor: false,
				dialogList: false
			};
		},
		mounted() {
			var page = 1;
			this.columnFind(page);
			this.shopListData(page);
			Cookie.remove('tabList');
		},
		methods: {
			// 刷新方法
			reloadVal() {
				this.reload();
			},
			// 查询、
			searchList() {
				this.columnFind(1);
			},
			// 排序
			sortChange(sortData) { 
				console.log(sortData)
				let orderBy;
				if(sortData.order != null){
					orderBy = sortData.prop;
					if(sortData.order == 'ascending'){
						orderBy += ' asc';
					}else{
						orderBy += ' desc';
					}
				}
				this.columnFind(1,orderBy);
			},
			columnFind(page,orderFlag) {
				const _this = this;
				_this.page.page = page;
				
				let obj = {
					page: _this.page.page,
					rows: _this.page.pagesize,
					keyword: undefined == _this.search.keyword ? '' : _this.search.keyword,
					orderBy: undefined == orderFlag ? '' : orderFlag,
				};
				_this.http.request({
					url: deviceList,
					data: obj,
					success: function(res) {
						_this.loading = false;
						_this.tableData = res.list;
						_this.page.count = res.total;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			// 听启用
			changeSwitch(index, row) {
				const _this = this;
				let isEnabled = '';
				if (row.isEnabled == true) {
					isEnabled = 1
				} else {
					isEnabled = 0
				}
				let dataMsg = {
					equId: row.equId,
					isEnabled: isEnabled
				};
				_this.http.request({
					url: deviceSwitch,
					data: dataMsg,
					success: function(res) {
						row.isEnabled = res.isEnabled;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			//搜搜门店
			searchshop(){
				this.shopListData(1)
			},
			//门店列表
			shopListData(page) {
				const _this = this;
				_this.page2.page = page;
				console.log("查询关键字="+_this.searchName)
				let obj = {
					page: _this.page2.page,
					rows: _this.page2.pagesize,
					downKeyword: _this.searchName
				};
				_this.http.request({
					url: shopList,
					data: obj,
					success: function(res) {
						_this.tableDataList = res.list;
						_this.page2.count = res.total;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			cellClick(row) {
				const _this = this;
				_this.cname = '更换绑定';
				_this.dialogColor = true;
				_this.equId = row.equId;
			},
			//单选行
			handlecurrentChange(val) {
				this.shopId = val.shopId;
			},
			// 确认更换
			yesChange() {
				const _this = this;
				if (_this.shopId == '') {
					_this.$message({
						message: '请选择一个店铺名称，店铺名称不能为空',
						offset: 350
					});
					return;
				}
				_this.$confirm('此操作将更换绑定门店, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					})
					.then(() => {
						_this.http.request({
							url: equShop,
							data: {
								equId: _this.equId,
								shopId: _this.shopId
							},
							success: function() {
								_this.dialogColor = false;
								_this.reload();
								/* this.$message({
									type: 'info',
									message: '修改绑定成功'
								}); */

							},
							error: function(err) {
								_this.$message({
									offset: '200',
									message: err.msg
								})
							}
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
			}
		}
	};
</script>

<style scoped="scoped" lang="less">
	.el-button--primary {
		background: rgba(113, 106, 202, 1);
		border: none;
	}

	.el-button--primary:hover {
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}

	.el-button--warning {
		color: #FFF;
		background-color: #F4516C;
		border-color: #F4516C;
	}
</style>
